<template>
	<view class="delivery">

		<!-- 顶部订单状态 -->
		<view class="delivery-nav" :style="'top:' + stickyTop + 'px'">
			<view class="delivery-nav-item" :class="{'active':index===chooseIndex}" v-for="(item,index) in navList"
				:key="index" @click="clickTab(index)">
				{{item}}
			</view>
		</view>

		<!-- 版心 -->
		<view class="public345">
			<!-- 订单遍历 -->
			<view class="delivery-item" v-for="item in showData" :key="item.id">

				<!-- 订单顶部 -->
				<view class="delivery-item-top">
					<view class="left">
						<text>订单编号</text>
						<text class="left-number">{{item.orderNumber}}</text>
						<!-- 复制图标 -->
						<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="14" color="#333">
						</uni-icons>
					</view>
					<view class="right">
						{{item.orderStatus}}
					</view>
				</view>

				<!-- 订单商品 -->
				<!-- <view class="delivery-item-shops"
					v-for="itemShop in item.defaultShowOne ? [item.orderShopList[0]] : item.orderShopList"
					:key="itemShop.id">
					<image :src="itemShop.src" mode="widthFix" class="image"></image>
					<view class="right">
						<view class="right-name">
							{{itemShop.name}}
						</view>
						<view class="right-number">
							<text>￥{{itemShop.price}}</text>
							<text>×{{itemShop.num}}</text>
						</view>
					</view>
				</view> -->

				<!-- 第一件商品 -->
				<view class="delivery-item-shops" v-for="itemShop in [item.orderShopList[0]]" :key="itemShop.id">
					<image :src="itemShop.src" mode="widthFix" class="image" />
					<view class="right">
						<view class="right-name">
							{{itemShop.name}}
						</view>
						<view class="right-number">
							<text>￥{{itemShop.price}}</text>
							<text>×{{itemShop.num}}</text>
						</view>
					</view>
				</view>

				<!-- 淡入 -->
				<!-- <u-transition :show="!item.defaultShowOne" mode="fade" duration="700"> -->
				<view class="" v-if="!item.defaultShowOne">
					<view class="delivery-item-shops" v-for="itemShop in item.orderShopList.slice(1)"
						:key="itemShop.id">
						<image :src="itemShop.src" mode="widthFix" class="image" />
						<view class="right">
							<view class="right-name">
								{{itemShop.name}}
							</view>
							<view class="right-number">
								<text>￥{{itemShop.price}}</text>
								<text>×{{itemShop.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- </u-transition> -->

				<!-- 展开 -->
				<view class="open-all" @click="lookAllShopsInOrder(item.id)" v-if="item.orderShopList.length !== 1">
					<uni-icons type="bottom" color="#FF7803" size="32rpx"
						:class="{rotateHalfCircle:!item.defaultShowOne}"></uni-icons>
					<text>{{item.defaultShowOne ? '展开' : '收起'}}</text>
					<text>（共{{item.orderShopList.length}}件）</text>
				</view>

				<!-- 实付运费 -->
				<view class="turly-cost">
					实付运费：
					<text style="color: #FE245E;">￥{{item.orderDelivery}}</text>
				</view>

				<!-- 订单底部 -->
				<view class="delivery-item-bottom">

					<!-- 订单详情 -->
					<view class="delivery-btn-box">
						<view class="btn bgConfirm" v-if="item.orderStatus === '待收货'">
							确认收货
						</view>
						<view class="btn" @click="goToPage('/pages/delivery/DeliveryOrder')">
							订单详情
						</view>
						<view class="btn" v-if="item.orderStatus !== '待发货'"
							@click="goToPage('/pages/delivery/DeliveryInfo')">
							查看物流
						</view>
						<view class="btn" v-if="item.orderStatus === '已完成'" @click="deleteOrder(item.id)">
							删除订单
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 没有订单显示 -->
		<view class="no-order public345" v-if="showData.length === 0">
			<image :src="imageUrl('no-order.png')" mode="" class="no-order-pic" />
			<view>暂无订单</view>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				// 吸顶
				stickyTop: 0,

				// 订单的四种状态
				navList: ['全部', '待发货', '待收货', '已完成'],

				// 选中的状态下标
				chooseIndex: 0,

				// 订单数据
				orderDataList: [{
					id: 1,
					orderNumber: '73252233118757',
					orderStatus: '待发货',
					orderShopList: [{
						id: 11,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						price: 42.36,
						num: 2
					}, {
						id: 12,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品称商品名称',
						price: 14.36,
						num: 7
					}, {
						id: 13,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						price: 30.36,
						num: 4
					}],
					defaultShowOne: true,
					orderDelivery: 15.00
				}, {
					id: 2,
					orderNumber: '73975532522331187',
					orderStatus: '待发货',
					orderShopList: [{
						id: 21,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						price: 42.36,
						num: 2
					}],
					defaultShowOne: true,
					orderDelivery: 15.00
				}, {
					id: 3,
					orderNumber: '739755325223',
					orderStatus: '待收货',
					orderShopList: [{
						id: 31,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						price: 42.36,
						num: 2
					}, {
						id: 32,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品称商品名称',
						price: 14.36,
						num: 7
					}],
					defaultShowOne: true,
					orderDelivery: 15.00
				}, {
					id: 4,
					orderNumber: '73975532522331',
					orderStatus: '已完成',
					orderShopList: [{
						id: 41,
						src: app.imagesUrl('delivery-item.png'),
						name: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
						price: 42.36,
						num: 2
					}],
					defaultShowOne: true,
					orderDelivery: 15.00
				}],

				// 展示数据
				showData: []
			}
		},
		onLoad(item) {
			// 接收mycenter传递的参数
			if (item.value) {
				this.chooseIndex = this.navList.indexOf(item.value)
			}
			this.clickTab(this.chooseIndex)
		},
		methods: {
			// 点击切换nav
			clickTab(index) {
				// 切换选中下标
				this.chooseIndex = index
				// 当前状态
				const currentStatus = this.navList[index]
				// 数据过滤
				this.showData = this.orderDataList.filter(i => {
					if (currentStatus === '全部') {
						return i
					} else if (currentStatus === i.orderStatus) {
						return i
					}
				})
			},
			// 展开or收起
			lookAllShopsInOrder(id) {
				this.orderDataList.forEach(i => {
					if (i.id === id) {
						i.defaultShowOne = !i.defaultShowOne
					}
				})
			},
			// 删除订单
			deleteOrder(id) {
				const that = this
				uni.showModal({
					title: '是否删除该订单',
					confirmColor: '#FF7803',
					success(res) {
						// confirm为true时 表示用户点击了确认
						if (res.confirm) {
							that.showData = that.showData.filter(i => i.id != id)
							that.orderDataList = that.orderDataList.filter(i => i.id != id)
						}
					}
				})
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		}
	}
</script>

<style lang="scss" scoped>
	.delivery {
		width: 100vw;
		padding-bottom: 100rpx;
		font-size: 28rpx;

		.delivery-nav {
			display: flex;
			width: 100vw;
			// padding: 32rpx 0 16rpx 30rpx;
			padding-left: 32rpx;
			background: #fff;
			color: #999;
			line-height: 84rpx;

			position: sticky;
			// top: 88rpx;

			// 在微信小程序 top值为0
			// #ifdef MP-WEIXIN 
			top: 0;
			// #endif 

			z-index: 99;


			.delivery-nav-item {
				margin-right: 68rpx;

				&.active {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}
			}
		}

		// 订单项
		.delivery-item {
			padding: 32rpx 20rpx;
			margin-top: 18rpx;
			border-radius: 20rpx;
			background: #fff;

			.delivery-item-top {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);

				// 左侧订单编号
				.left {
					color: #999;

					.left-number {
						margin: 0 10rpx;
						color: #333;
					}
				}

				// 右侧订单状态
				.right {
					color: #FF7803;
				}
			}

			// 订单商品
			.delivery-item-shops {
				display: flex;
				margin-top: 32rpx;
				// margin-bottom: 32rpx;

				.image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.right {
					width: 510rpx;
					margin-left: 20rpx;

					.right-name {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.right-number {
						display: flex;
						justify-content: space-between;
						// margin-top: 50rpx;
						margin-top: 44rpx;
					}
				}
			}

			// 展开
			.open-all {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 22rpx 0;
				color: #FF7803;
				font-size: 24rpx;
				text-align: center;

				.rotateHalfCircle {
					transform: rotate(-180deg);
				}
			}

			// 实付运费
			.turly-cost {
				margin-top: 20rpx;
				text-align: right;
			}

			.delivery-item-bottom {
				margin-top: 20rpx;
				border-top: 1rpx solid rgba(0, 0, 0, .1);

				.delivery-btn-box {
					padding: 20rpx 0 0;

					.btn {
						float: right;
						width: 160rpx;
						margin-left: 20rpx;
						text-align: center;
						line-height: 64rpx;
						border: 2rpx solid #D0D0D0;
						border-radius: 32rpx;
						color: #333;
						font-size: 24rpx;
						box-sizing: border-box;

						// 确认收货
						&.bgConfirm {
							border: 0;
							color: #fff;
							background: linear-gradient(270deg, #FC4C14 0%, #FD7303 100%);
						}
					}

					// 清除浮动
					&::after {
						content: '';
						display: block;
						height: 0;
						clear: both;
					}
				}
			}
		}

		.no-order {
			height: 50vh;
			text-align: center;
			font-size: 24rpx;
			line-height: 72rpx;
			color: #999;

			.no-order-pic {
				display: block;
				width: 160rpx;
				height: 160rpx;
				margin: 200rpx auto 0;
			}
		}
	}
</style>